<template>
    <div>
        <h2>当前求和为：{{ countStore.sum }}</h2>
        <br>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="reduce">减</button>
    </div>
</template>
<script setup name='Count' lang="ts">
    import { ref } from "vue"
    import {useCountStore} from '@/store/count'
    let countStore=useCountStore()
    //counrStore是个响应式对象,下面这两种方法都能取到sum
    console.log("@@",countStore.sum);
    console.log("@@",countStore.$state.sum);

    let n=ref(1)

    //需要注意的是，如果在响应式数据内部用ref定义的数据，那这个ref定义的数据不需要.value
    //不管这个响应式数据是用ref定义的还是reactive定义的
    let test=ref({
        id:"1",
        name:ref("111")
    })
    console.log(test.value.name);
    //console.log(test.value.name.value);//undefined
    
    function add(){
        //第一种修改方式，适合单个属性变更
        //countStore.sum +=n.value

        //第二种修改方式，属性批量变更
        //这种方式无论修改几个属性，只修改一次，第一种就是修改几个，修改几次
        /*countStore.$patch({
            sum:222,
            address:"3333",
            phone:"8888888"
        })*/

        //第三种修改方式，详情见count.ts
        //只做单纯修改推荐1和2两种
        //如果带逻辑的修改，比如加到多少不加了，推荐第三种 ，毕竟回调函数里能写判断什么的
        countStore.jia(333)

    }
    function reduce(){
        countStore.sum-=n.value
    }

</script>
<style scoped>
</style>
